<template>
  <el-drawer class="nav-drawer" title="" direction="ltr" :modal="false" :append-to-body="true" :visible.sync="localShowDrawer" :with-header="false">
    <div class="flex flex-col gap-4 p-4 select-none">
      <nuxt-link :to="localePath('/')" class="h-[2.13rem]" @click.native="localShowDrawer = false">
        <img
          class="object-cover h-full"
          src="https://cd.sealmg.com/assets/img/logo-img.png"
          alt="SEALMG Logo"
          title="Back to homepage"
          loading="lazy"
        />
      </nuxt-link>
      <div class="flex flex-col gap-6">
        <div v-for="item in value" :key="item.id" class="flex flex-col">
          <div class="flex justify-between items-center cursor-pointer">
            <nuxt-link class="flex gap-2 items-center" :to="localePath(item.route.path)" @click.native="localShowDrawer = false">
              <div class="size-[1.25rem] flex-none">
                <img class="size-full" :src="$globalFn.imgPrefixUrl(item.pic_image)" alt="Category icon" title="Main category" />
              </div>
              <span class="text font-medium text-[0.88rem] text-[#141414]">
                {{ item.name }}
              </span>
            </nuxt-link>
            <div class="flex items-center p-2" @click="switchSubMenu(item)">
              <img
                src="~/assets/img/categoryH5.png"
                v-if="item._child && item._child.length"
                class="object-cover w-3"
                :class="['  transition-all duration-300', item.isOpenH5 ? 'rotate-180' : '']"
                alt=""
              />
            </div>
          </div>
          <div
            v-if="item._child && item._child.length"
            :class="['flex flex-col gap-6 overflow-hidden transition-all duration-300', item.isOpenH5 ? ' opacity-100 pt-4' : 'max-h-0 opacity-0']"
          >
            <nuxt-link
              v-for="child in item._child"
              :key="child.id"
              class="flex items-center gap-2 px-4 cursor-pointer hover:text-[#FF4E33]"
              :to="localePath(`${child.route.path}`)"
              @click.native="localShowDrawer = false"
            >
              <div class="size-[1.1rem] flex-none">
                <img class="size-full" :src="$globalFn.imgPrefixUrl(child.pic_image)" alt="Subcategory icon" title="Category item" />
              </div>
              <div class="font-medium text-[0.88rem] text-[#666666] capitalize line-clamp-1">
                {{ child.name }}
              </div>
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script>
  export default {
    props: {
      // 分类数据，可以是数组或对象
      value: {
        type: [Array, Object],
        default: null
      },
      // 控制抽屉显示状态
      showDrawer: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      localShowDrawer: {
        get() {
          return this.showDrawer
        },
        set(value) {
          this.$emit('update:showDrawers', value)
        }
      }
    },
    methods: {
      switchSubMenu(item) {
        const updatedCategories = this.value.map(category => ({
          ...category,
          isOpenH5: category.id === item.id ? !category.isOpenH5 : false
        }))
        this.$store.commit('initData/setCategoryData', updatedCategories)
      }
    }
  }
</script>
<style lang="less" scoped></style>
